<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			table{
				
				width: 248px;
				
				height: 250px;
				
				border: 1px solid #95B8E7;
				
				
				font-size: 12px;
				
				font-family: 'Helvetica Neue', Helvetica, 'Microsoft Yahei', ;
			}
			
			.calendar-saturday{
				color: #00ee00;
			}
			
			.calendar-sunday{
				color: #CC2222;
			}
			
			.calendar-other-month{
				
				opacity: 0.3;
			}
			
			#calendar-selected{
				
				background-color: #ffe48d;
				
				border: 1px solid #ffab3f;
				
				text-align: center;
				
				border-radius: 5px 5px 5px 5px;
			}
			
			table tr td{
				
				text-align: center;
				
				
			}
			table tr td:hover{
				
				background-color: #eaf2ff;
				border-radius: 5px 5px 5px 5px;
			}
			
			
			#syn{
				
				width: 14px;
				height: 14px;
				background: url(img/calendar_arrows.png) no-repeat -1px -2px;
				
				float: left;
			}
			
			#syy{
				
				width: 14px;
				height: 14px;
				background: url(img/calendar_arrows.png) no-repeat -18px -2px;
				
				float: left;
			}
		</style>
	</head>
	<body>
		
		<table>
			
			<!--第1行-->
			<tr>
				<td colspan="7">
					
					<div id="syn"></div>
					
					<div id="syy"></div>
					
				</td>
			</tr>
			
			<!--第2行-->
			<tr>
				<td>S</td>
				<td>M</td>
				<td>T</td>
				<td>W</td>
				<td>T</td>
				<td>F</td>
				<td>S</td>
			</tr>
			
			<!--第3行-->
			<tr>
				<td class="calendar-sunday calendar-other-month">27</td>
				<td class="calendar-other-month">28</td>
				<td class="calendar-other-month">29</td>
				<td class="calendar-other-month">30</td>
				<td class="calendar-other-month">31</td>
				<td>1</td>
				<td class="calendar-saturday">2</td>
			</tr>
			<tr>
				<td class="calendar-sunday">3</td>
				<td id="calendar-selected">4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td class="calendar-saturday">9</td>
			</tr>
			<tr>
				<td class="calendar-sunday">10</td>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
				<td class="calendar-saturday">16</td>
			</tr>
			<tr>
				<td class="calendar-sunday">17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td class="calendar-saturday">23</td>
			</tr>
			<tr>
				<td class="calendar-sunday">24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</td>
				<td>29</td>
				<td class="calendar-saturday">30</td>
			</tr>
			<tr>
				<td class="calendar-sunday calendar-other-month">1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td class="calendar-saturday calendar-other-month">7</td>
			</tr>
		</table>
	</body>
</html>
